<script lang="ts" setup>
import { message } from 'ant-design-vue'
import { getSearchList } from '~/api/search'
import type { ISearchList } from '~/types/api';

let searchInputValue = $ref('') // 输入框内容
let timer = $ref<NodeJS.Timeout>() // 定时器
let searchList = $ref<ISearchList[]>() // 下拉框列表

// 当输入框输入内容一会后请求接口，显示下拉框
const onSearchInput = function () {
  clearTimeout(timer)
  if (searchInputValue !== '') {
    timer = setTimeout(async () => {
      searchList = (await getSearchList({ title: searchInputValue })).data
    }, 500)
  }
}

// 下拉框列表数据
let getOptions = $computed(() => {
  return searchList?.map((item) => ({ id: item.id, value: item.title })).slice(0, 5)
})

// 搜索后清空输入框内容
const clearInputAndOptions = function () {
  searchInputValue = ''
  searchList = []
  getOptions = []
}

// 搜索执行
const onEnterKeydown = async function () {
  if (searchInputValue) {
    clearTimeout(timer)
    // 搜索结果页跳转
    await navigateTo({
      path: '/videoListPage',
      query: {
        search: searchInputValue
      }
    })
    clearInputAndOptions()
  } else {
    message.info('请输入搜索内容')
  }
}
</script>

<template>
  <div class="search">
    <div absolute flexc z-100 top-5px right-7px @click="(onEnterKeydown())">
      <cdn-img src="/images/svg/search.svg" />
    </div>
    <a-auto-complete v-model:value="searchInputValue" @change="onSearchInput()" placeholder="请输入搜索内容"
      :options="getOptions" @keydown.enter="onEnterKeydown" class="w-220px! rounded-119px" @select="onEnterKeydown()"
      :defaultActiveFirstOption="false" />
  </div>
</template>

<style lang="less" scoped>
.search {
  position: relative;
  width: 220px;

  :deep(.ant-select-selector) {
    border-radius: 119px;
  }

  :deep(.ant-select-selection-search) {
    width: 167px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>